<!--  -->
<template>
  <a-drawer :title="isEdit ? '编辑用户' : '查看用户'" :with-header="false" :visible.sync="editDrawVisible" :width="520" @close="closeDrawer(0)">
    <a-form-model
      ref="ruleForm"
      style="padding-bottom:30px"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol">
      <a-form-model-item label="账户" prop="account">
        <a-input v-model="form.account" :maxLength="10" :disabled="!isEdit" />
      </a-form-model-item>
      <a-form-model-item label="用户名" prop="userName">
        <a-input v-model="form.userName" :maxLength="20" :disabled="!isEdit" />
      </a-form-model-item>
      <a-form-model-item label="成员姓名" prop="name">
        <a-input v-model="form.name" :maxLength="10" :disabled="!isEdit" />
      </a-form-model-item>
      <a-form-model-item label="邮箱" prop="email">
        <a-input v-model="form.email" :disabled="!isEdit" />
      </a-form-model-item>
      <a-form-model-item label="手机" prop="phone">
        <a-input v-model="form.phone" :disabled="!isEdit" />
      </a-form-model-item>
      <a-form-model-item label="用户类型" prop="type">
        <a-select v-model="form.type" placeholder="请选择用户类型" @change="handleTypeChange" :disabled="!isEdit">
          <a-select-option v-for="(item, index) in $const.USER_TYPE" :value="item.value" :key="index">{{
            item.desc
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="机构" ref="orgId" prop="orgId" v-if="form.type == $const.USER_TYPE.ZUZHI.value">
        <a-select v-model="form.orgId" placeholder="请选择机构" @change="handleSelect(form.orgId)" allowClear :disabled="!isEdit">
          <a-select-option v-for="(item, index) in orgList" :value="item.id" :key="index">{{
            item.orgName
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="科室" prop="orgHospitalDeptId" v-if="form.type == $const.USER_TYPE.ZUZHI.value && isHospital">
        <a-select v-model="form.orgHospitalDeptId" placeholder="请选择所属科室" allowClear :disabled="!isEdit">
          <a-select-option v-for="(item, index) in depList" :value="item.id" :key="index">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="职务" prop="position" v-if="form.type == $const.USER_TYPE.ZUZHI.value">
        <a-input v-model="form.position" :disabled="!isEdit" />
      </a-form-model-item>
      <a-form-model-item label="系统管理员" prop="isAdmin">
        <a-select v-model="form.isAdmin" @change="handleAdminChange" disabled>
          <a-select-option :value="1">是</a-select-option>
          <a-select-option :value="0">否</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="角色" prop="roleId" v-if="form.isAdmin">
        <!-- <a-select v-model="form.roleId" placeholder="请选择角色" style="margin-bottom: 20px" allowClear disabled> -->
        <a-select v-if="isAdminName === '管理员'" disabled v-model="form.roleId" placeholder="请选择角色" style="margin-bottom: 20px" >
          <a-select-option :value="form.roleId">{{ '管理员' }}</a-select-option>
        </a-select>
        <a-select v-else v-model="form.roleId" placeholder="请选择角色" allowClear :disabled="!isEdit">
          <a-select-option v-for="item in roleList" :value="item.id" :key="item.id">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
    <!-- 操作栏 -->
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-space>
        <a-button type="primary" :loading="loading" @click="handleOk">确定</a-button>
        <a-button @click="closeDrawer(0)">取消</a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import monitor from '@/utils/monitor'
import editDrawer from '@/monitor/views/system/components/editDrawer.js'

import { getOrgList, updateUser } from '@/api/system/user'
import { listOrgDepts } from '@/api/common'
import { roleList } from '@/api/system/role.js'

const watch = monitor(editDrawer)

export default {
  name: '',
  props: {
    editDrawVisible: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    // const validatorMobile = (rule, value, callback) => {
    //   !this.$func.validatePhone(value) ? callback(new Error('手机号格式错误！')) : callback()
    // }
    return {
      userInformation: '',
      roleHidden: true,
      form: {
        isAdmin: 0
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      loading: false,
      orgList: [], // 机构list
      depList: [], // 科室list
      rules: {
        account: [
          { required: true, message: '请输入账户' },
          { pattern: /^[0-9a-zA-Z_]{1,}$/, message: '账户格式只能数字和英文' }
        ],
        userName: [{ required: true, message: '请输入用户名' }],
        name: [
          { required: false, message: '请输入姓名' },
          { pattern: /^.{1,10}$/, message: '姓名格式错误' }
        ],
        email: [
          { required: false, message: '请输入邮箱' },
          { pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: '邮箱格式错误' }
        ],
        phone: [
          { required: true, message: '请输入手机' },
          { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '手机号格式错误' }
        ],
        position: [{ required: false, message: '请输入职务' }],
        // orgId: [{ required: false, message: '请选择组织机构' }],
        // orgHospitalDeptId: [{ required: false, message: '请选择科室' }],
        type: [{ required: true, message: '请选择类型' }],
        isAdmin: [{ required: true, message: '请选择' }]
        // roleId: [{ required: false, message: '请选择角色' }]
      },
      roleList: [],
      isPerson: false,
      isHospital: false,
      isLoad: true,
      isAdminName: null
    }
  },
  mounted () {
    this.userInformation = this.$store.getters.nickname
    if (this.userInformation === 'CRC' || this.userInformation === 'PM') {
      this.roleHidden = false
    }
    // this.userInformation = localStorage.setItem('curRole', res.user.roleName)
    this.getInterfaceData()
  },
  watch: {
    editDrawVisible (newValue) {
      if (newValue) {
        this.isHospital = false
        if (this.orgList && this.orgList.length) {
          this.checkHospital()
        } else {
          this.isLoad = false
        }
      }
    }
  },
  methods: watch({
    // 获取组织机构
    getOrgList () {
      getOrgList().then(res => {
        this.orgList = res
        if (this.isLoad === false) {
          this.isLoad = true
          this.checkHospital()
        }
      })
    },
    // 获取角色list
    getRoleList () {
      roleList().then(res => {
        this.roleList = res
      })
    },
    getInterfaceData () {
      this.getOrgList()
      this.getRoleList()
    },
    // 获取科室列表
    getAreaList () {
      if (this.form.orgId) {
        listOrgDepts({ orgId: this.form.orgId })
          .then(res => {
            this.depList = res
          })
          .catch(() => {})
      }
    },
    checkHospital () {
      if (this.orgList && this.orgList.length && this.form.orgId) {
        const data = this.orgList.find(item => { return item.id === this.form.orgId })
        if (data) {
          this.isHospital = data.type === 2
        }
      } else {
        this.isHospital = false
      }
    },
    // select 回调
    handleSelect (id) {
      // 判断选中的机构是否是医院
      this.checkHospital()

      this.depList = []
      this.form.orgHospitalDeptId = null
      this.getAreaList()
    },
    // 类型改变
    handleTypeChange (val) {
      this.isPerson = Number(val) === 1 ? true : 0
    },
    // 系统管理员下拉框改变
    handleAdminChange (val) {
      this.form.isAdmin = val
      this.$forceUpdate()
    },
    // 确定回调
    handleOk () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          updateUser(this.form).then(res => {
            this.$message.success('操作成功！')
            this.closeDrawer(1)
            this.saveEditUser()
            this.saveEditAccount()
          })
        }
      })
    },
    // 关闭对话框重置表单
    closeDrawer (val) {
      this.$emit('closeEditDrawer', val)
      this.$refs.ruleForm.resetFields()
      this.form = this.$options.data().form
    },
    // 所选科室进行回显
    echoDepartment () {
      if (this.form.orgId) {
        this.getAreaList()
      }
    },
    // 判断是否为个人
    judgeType () {
      this.isPerson = Number(this.form.type) === 1 ? 1 : 0
    },
    // 保存编辑用户埋点
    saveEditUser () {},
    // 保存编辑账户埋点
    saveEditAccount () {}
  })
}
</script>
<style scoped lang="less"></style>
